import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-instance02',
  templateUrl: './instance02.component.html',
  styleUrls: ['./instance02.component.css'],
})
export class Instance02Component implements OnInit {
  books = ['水浒', '红楼', '西游'];

  //面向对象类中的构造方法,组件最最开始的时候触发.
  //一定会触发
  constructor() {
    console.log('constructor:构造方法,在组件出生的第一时间触发');
  }

  //init:初始化,生出后将组件中的内容开始初始化.例如页面上的UI..
  ngOnInit(): void {
    console.log('ngOnInit:组件中的内容开始初始化');
    //作用: 在该生命周期中可以发送网络请求等..
  }

  //组件中的数据初始化时触发.
  ngAfterContentInit(): void {
    console.log('ngAfterContentInit:组件中的数据初始化时触发.');
  }

  //组件上的UI界面初始化时触发.
  ngAfterViewInit(): void {
    console.log('ngAfterViewInit:组件上的UI界面初始化时触发.');
  }

  //监听组件上的数据发生变化时触发.
  ngAfterContentChecked(): void {
    console.log('ngAfterContentChecked:监听组件上的数据发生变化时触发.');
  }

  //组件上的UI随着数据的变化而更新时触发.
  ngAfterViewChecked(): void {
    console.log('ngAfterViewChecked:组件上的UI随着数据的变化而更新时触发.');
  }

  // 组件销毁
  ngOnDestroy(): void {
    console.log('ngOnDestroy:销毁方法,在组件销毁时触发');
    // 在该生命周期中可以做清理数据等..
  }
}
